<template>
    <show-modal :title="options.title" :loading="options.loading" width="540px" @cancel="cancel" @submit="submit">
        <a-form ref="formRef" :model="formState" :rules="rules" v-bind="layout">
            <a-form-item label="菜单名称" name="name">
                <a-input v-model:value="formState.name" placeholder="请输入菜单名称" />
            </a-form-item>
            <a-form-item label="菜单类型" name="type">
                <a-radio-group v-model:value="formState.type" size="large">
                    <a-radio :value="item.dict_value" v-for="item in type"
                        :key="item.id">{{ item.dict_label }}</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="上级菜单" name="parentId">
                <a-tree-select style="width: 100%" v-model:value="formState.parent_id"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择上级菜单" allow-clear
                    :fieldNames="fieldNames" :tree-data="treeData">
                </a-tree-select>
            </a-form-item>

            <a-form-item label="菜单图标" name="icon" v-if="formState.type != 'F'">
                <a-popover v-model:value="visible" trigger="click">
                    <template #content>
                        <a-list style="width: 400px" :grid="{ gutter: 6, column: 6 }" :data-source="iconList">
                            <template #renderItem="{ item }">
                                <a-list-item slot="renderItem" slot-scope="item">
                                    <div class="text-center pointer icon-wrapper" @click.capture.stop="selectIcon(item)">
                                        <svg-icon :icon="item" :size="20" class="disabled" />
                                    </div>
                                </a-list-item>
                            </template>
                        </a-list>
                    </template>
                    <a-input v-model:value="formState.icon" placeholder="请选择图标">
                        <template #prefix>
                            <svg-icon v-if="formState.icon" :icon="formState.icon" />
                        </template>
                    </a-input>
                </a-popover>
            </a-form-item>
            <a-form-item label="权限名称" name="path" v-if="formState.type != 'C'">
                <a-input v-model:value="formState.path" placeholder="请输入权限名称" />
            </a-form-item>
            <a-form-item label="显示菜单" v-if="formState.type != 'F'" name="show">
                <a-radio-group :options="isShowMenu" v-model:value="formState.show" />
            </a-form-item>

            <a-form-item label="是否跳出" v-if="formState.type == 'C'" name="extend">
                <a-radio-group :options="extrenalList" v-model:value="formState.extend" />
            </a-form-item>
            <a-form-item label="路径" name="path" v-if="formState.type == 'C'">
                <a-select showSearch v-model:value="formState.path" placeholder="请选择文件路径">
                    <a-select-option :value="item.value" v-for="(item, index) in routeList" :key="index">
                        {{ item.value }}
                    </a-select-option>
                </a-select>
            </a-form-item>

            <a-form-item label="排序" name="orderNum">
                <a-input-number class="form_item" type="number" v-model:value="formState.orderNum" />
            </a-form-item>
        </a-form>
    </show-modal>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { rules } from './rules'
import { IMenu } from '../menu.types';
import { add, update, remoteList } from '@/api/system/menu';
import { message } from 'ant-design-vue';
import { useForm } from '@/hooks/use-form/index'
import { extrenalList, isShowMenu } from '../dictionary'
import { IMenuRoute, getMenuList } from '@/utils/menu-list'
import { getIconList } from '@/utils/icon-list'

let props = defineProps({
    info: {
        type: Object,
        default: () => null
    },
    type:{
        type:Object,
        default:()=>{}
    }
})
//菜单选择字段匹配
let fieldNames = ref({
    children: 'children', label: 'name', value: 'id', key: 'id'
})
//图标弹出显示隐藏
let visible = ref<boolean>(false);
//已经设置的菜单
let treeData = ref<any[]>([]);
onMounted(async () => {
    let res = await remoteList({ page: 0, size: 0 });
    let { data } = res;
    treeData.value = [
        {
            name: '顶级菜单',
            id: -1,
            children: [...data]
        }
    ]
})
//icon列表
let iconList = ref<string[]>();
iconList.value = getIconList();
//本地路由列表
let routeList = ref<IMenuRoute[]>();
routeList.value = getMenuList();

let emit = defineEmits(['cancel', 'submit']);
// /**基本配置 */
const options = reactive({
    title: '菜单信息',
    loading: false
})
/**表单 */
let form = reactive<IMenu>({
    id: '',
    name: '',
    type: 'M',
    parent_id: undefined,
    path: '',
    icon: '',
    show: true,
    extend: false,
    orderNum: 0
});

props.info && Object.assign(form, props.info)

const { formRef, layout, formState, showLoading, hideLoading, formValidateFields } = useForm(form);
//选择图标
const selectIcon = (item: string) => {
    formState.value.icon = item;
    visible.value = false;
}
// 提交
const submit = async () => {
    try {
        let res = await formValidateFields();
        showLoading()
        if (res.id) {
            await update(res);
        } else {
            await add(res);
        }
        message.success('操作成功');
        emit('submit');
    } finally {
        hideLoading()
    }
}
//取消
const cancel = () => {
    emit('cancel')
}
</script>